<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="realtime-offline-tasklist">
    <div class="query_div">
      <el-form inline size="small" class="form_class" label-width="100">
        <el-form-item label="任务名称:">
          <el-input v-model="queryParams.taskName" clearable/>
        </el-form-item>
        <el-form-item label="任务状态:">
          <el-select v-model="queryParams.status" clearable filterable>
            <el-option v-for="(val, key) in statusMap" :key="key" :label="val" :value="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 100px">
          <el-button type="primary" size="small" @click="buttonClick('query')">查询</el-button>
          <el-button size="small" @click="resetQuery()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="btn_div">
      <el-button size="small" type="primary" :disabled="readOnly" @click="buttonClick('add')">
        <el-icon class="el-icon--left"><Plus /></el-icon>创建新任务
      </el-button>
    </div>
    <div class="table_div" v-loading="loading">
      <el-table :data="tableData" border>
        <el-table-column label="任务ID" align="center" prop="id" width="200" />
        <el-table-column label="任务名称" align="center" prop="taskName" />
        <el-table-column label="任务描述" align="center" prop="taskDescription" />
        <el-table-column label="新增时间" align="center" prop="createTime" width="180" >
          <template #default="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="修改时间" align="center" prop="updateTime" width="180" >
          <template #default="scope">
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="statusByName" />
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-tooltip content="修改" placement="top">
              <el-button size="small" link type="primary" icon="EditPen" @click="buttonClick('edit', scope.row)">修改</el-button>
            </el-tooltip>
            <el-tooltip content="启动" placement="top">
              <el-button v-if="scope.row.status == 0 && props.taskType == 'REAL_TIME_SYNC'" size="small" link type="primary" icon="Position" @click="startJob('real', scope.row)">启动</el-button>
            </el-tooltip>
            <el-tooltip content="外部触发" placement="top">
              <el-button v-if="scope.row.status == 4 && props.taskType == 'OFFLINE_SYNC'" size="small" link type="primary" icon="Position" @click="startJob('offline', scope.row)">外部触发</el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button size="small" link type="primary" icon="Delete" @click="buttonClick('delete', scope.row)">删除</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <el-pagination
          v-show="total > 0"
          layout="prev, pager, next, jumper"
          :total="total"
          :page-size="queryParams.pageSize"
          :current-page="queryParams.pageNum"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>
        
<script name="TaskList" setup>
import { getDatasourceDataIntegrationTaskList, deleteDatasourceDataIntegrationTask, triggerDatasourceDataIntegrationTask } from '@/api/dataIntegration/dataSync';
const emits = defineEmits(['handleEvent']);
const props = defineProps(['taskType']);
const tableData = ref([]);
const currentData = ref(null);
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  taskName: '',
  status: '',
  isAsc: 'descending',
  orderByColumn: 'CreateTime',
});
const statusMap = ref({});
const statusMap1 = ref({
  '0': '未开始',
  '1': '运行中',
  '2': '同步成功',
  '3': '同步失败',
  '8': '已中止'
});
const statusMap2 = ref({
  '4': '未调度',
  '5': '调度中',
  '6': '调度成功',
  '7': '调度失败',
});
const total = ref(0);
const loading = ref(false);
const buttonClick = (type, data) => {
  if (type === 'add') {
    emits('handleEvent', { component: 'TaskOperation', type: props.taskType, rowId: null, operationType: 'add' });
  }
  if (type === 'query') {
    queryByCondition();
  }
  if (type === 'reset') {
    queryParams.value = {
      pageNum: 1,
      pageSize: 10,
      path: '',
      label: '',
      fieldId: '',
      algorithmName: ''
    };
    queryByCondition();
  }
  if (type === 'edit') {
    currentData.value = data;
    emits('handleEvent', { component: 'TaskOperation', type: props.taskType, rowId: data.id, operationType: 'edit' });
  }
  if (type === 'delete') {
    doDelete(data);
  }
};
const startJob = (type, data) => {
  triggerDatasourceDataIntegrationTask({needSync: true, taskId:data.id}).then((res) => {
    if (res) {
      ElMessage({ showClose: true, message: '启动成功', type: 'success' });
      queryByCondition(); // 刷新列表
    }
  });
};
// 删除
const doDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该数据项？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteDatasourceDataIntegrationTask(data.id).then((res) => {
      if (res) {
        ElMessage({ showClose: true, message: '删除成功', type: 'success' });
        queryByCondition();
      }
    });
  });
};
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  queryByCondition();
};
// 重置功能实现
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    taskName: '',
    status: '',
    isAsc: 'descending',
    orderByColumn: 'CreateTime'
  };
  queryByCondition();
};
// 查询数据
const queryByCondition = () => {
  tableData.value = [];
  loading.value = true;
  queryParams.value.syncType = props.taskType;
  getDatasourceDataIntegrationTaskList(queryParams.value).then((res) => {
    if (res?.rows) {
      tableData.value = res?.rows || [];
      total.value = res?.total || 0;
    }
  }).finally(()=>{
    loading.value = false;
  });
};
onMounted(() => {
  statusMap.value = props.taskType === 'REAL_TIME_SYNC' ? statusMap1.value : statusMap2.value;
  queryByCondition();
});
</script>
<style scoped lang="scss">
.realtime-offline-tasklist {
  height: calc(100vh - 155px);
  overflow: auto;
  width: 100%;
  .form_class {
    border: 1px solid #dddddd7a;
    padding: 10px;
    // margin-top: 10px;
    margin-bottom: 10px;
  }
  .btn_div {
    margin-bottom: 10px;
  }
  .table_div {
    .pagenation {
      display: flex;
      justify-content: end;
      margin-top: 10px;
    }
  }
}

:deep(.el-cascader) {
  width: 100%;
}
</style>
